<div #panelDropDown class="top-panel-dropdown lv-dropdown-panel-holder closeable-filter"
     [attr.filter-id]="filterId">

    <span (click)="toggleFilterPanel()"
          [class.disabled-filter]="!enabled"
          [class.modified]="originalName !== name || originalScript !== script">
        <span *ngIf="titleName">{{titleName}}</span>

        <span *ngIf="!titleName">
            Script: <span class="header-script">{{titleScript}}</span>
        </span>
        &nbsp;<i class="fas fa-caret-down"></i>
    </span>
    <mat-icon (click)="removeFilter()" title="Remove filter" class="remote-filter-icon">close</mat-icon>
    
    <div *ngIf="dropdownShown" class="lv-dropdown-panel" [class.lv-dropdown-panel-right]="dropdownRight">
        <form class="js-filter" (ngSubmit)="onApply()">
            <div class="name-panel">
                <mat-form-field class="filter-name" appearance="fill">
                    <mat-label>Filter name <span *ngIf="name !== originalName" class="modifier-name-flag"> *</span></mat-label>
                    <input name="name-filter-input" [(ngModel)]="name" matInput>
                </mat-form-field>

                <div style="float: right">
                    <lv-switch [(value)]="enabled" (valueChange)="enableDisable()"
                               [title]="enabled ? 'Disable filter' : 'Enable filter'"></lv-switch>
                </div>
            </div>

            <span class="small">
                    Function that determines whether the event will be shown or not (JavaScript)
                    <span *ngIf="script !== originalScript" class="modified-script-flag" title="Script contains unsaved changed"> *</span>
            </span>

            <div class="script-container">
                <div class="script-editor"
                     lvAceEditor
                     [options]="scriptEditorOptions"
                     [text]="script"
                     (textChanged)="onScriptChanged($event)"
                     (keydown)="editorKeyDown($event)"
                     [mode]="'javascript'">
                </div>
            </div>

            <div class="script-info text-secondary">
                <span class="field-in-info">text</span> - entire event text.
                <span *ngIf="fieldList.length">
                    <br>
                    <span class="field-in-info">fields</span> - object containing event fields. The following fields are present
                    in the current log:
                    <span>
                        <span *ngFor="let field of fieldList" class="field-with-comma">
                            <span class="comma">, </span>
                            <span class="field-in-info">{{field}}</span>
                        </span>
                    </span>
                </span>
            </div>

            <div class="action-panel">
                <button mat-stroked-button title="Apply filter" (click)="onApply()"
                        name="apply-button">
                    Save
                </button>

                <button mat-button mat-stroked-button title="Revert changes" (click)="onCancel()" name="cancel-button">
                    Revert
                </button>
            </div>
        </form>
    </div>
</div>
